<template>
    <div class="app-container" style="background: #E6EBE9;">
        <div class="home-top">
            <div class="home-top-item home-top-one">
                <span class="home-tit-one">发布量</span>
                <div class="home-tit-two">{{ totalResult.total }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-two">
                <span class="home-tit-one">浏览量</span>
                <div class="home-tit-two">{{ totalResult.pageViewNum }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-three">
                <span class="home-tit-one">收藏量</span>
                <div class="home-tit-two">{{ totalResult.collectionNum }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
            <div class="home-top-item home-top-four">
                <span class="home-tit-one">下载量</span>
                <div class="home-tit-two">{{ totalResult.downloadNum }}
                    <span class="home-tit-three">篇</span>
                </div>
            </div>
        </div>
        <div class="home-center">
            <el-card shadow="never" class="home-center-left">
                <div class="home-center-tit">
                    <img src="/static/homeImg/shenhe.png" alt="">
                    <div class="img-tit">我的待审核</div>
                </div>
                <div class="center-left">
                    <div class="center-left-item" v-for="(item, i) in approvalRecordList" :key="i">
                        <div class="left-item">
                            <img class="left-item-img" src="/static/homeImg/naozhong.png" alt="">
                            <div class="left-item-time">{{ item.createTime }}</div>
                        </div>
                        <div class="right-item">
                            <div class="right-item-top">{{ item.titleName }}</div>
                            <div class="right-item-bottom">发布人：{{ item.publisher }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card shadow="never" class="home-center-right">
                <div class="home-center-tit">
                    <img src="/static/homeImg/xiazai.png" alt="">
                    <div class="img-tit">我的下载</div>
                </div>
                <div class="center-right">
                    <div class="center-right-item" v-for="(item, i) in myDownloadList" :key="i">
                        <div class="icon"></div>
                        <div class="tit-name">{{ item.titleName }}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <el-card shadow="never" class="home-bottom">
            <div class="echarts-top">
                <img class="echarts-top-img" src="/static/homeImg/tongji.png" alt="">
                <div class="echarts-top-tit">文章发布数统计</div>
                <el-radio-group class="echarts-top-radio" v-model="radio" size="mini" fill="#27A280" @change="radioChange">
                    <!-- <el-radio-button label="机构发布统计"></el-radio-button>
                    <el-radio-button label="专家发布统计"></el-radio-button>
                    <el-radio-button label="运营发布统计"></el-radio-button> radioList-->
                    <el-radio-button v-for="item in radioList" :key="item.value" :label="item.value">
                        {{ item.label }}
                    </el-radio-button>
                </el-radio-group>
                <div class="echarts-top-btn">
                    <el-button round size="mini" :class="{ btnSelet: btnName === '昨日' }" @click="seletDate('昨日')">昨日
                    </el-button>
                    <el-button round size="mini" :class="{ btnSelet: btnName === '仅七天' }" @click="seletDate('仅七天')">
                        仅七天
                    </el-button>
                    <el-button round size="mini" :class="{ btnSelet: btnName === '近一个月' }" @click="seletDate('近一个月')">近一个月
                    </el-button>
                    <el-button round size="mini" :class="{ btnSelet: btnName === '近半年' }" @click="seletDate('近半年')">
                        近半年
                    </el-button>
                    <el-button round size="mini" :class="{ btnSelet: btnName === '近一年' }" @click="seletDate('近一年')">
                        近一年
                    </el-button>
                </div>
                <el-date-picker class="echarts-top-time" size="mini" v-model="time" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="timeChange">
                </el-date-picker>
            </div>
            <div style="display: flex;width: 1580px;">
                <div id="home-echarts"></div>
                <div class="ranking">
                    <div class="ranking-tit">统计报表</div>
                    <div style="display: flex;justify-content: space-around;">
                        <el-select v-model="statisticalStatement" placeholder="请选择" @change="getList">
                            <el-option v-for="item in ['各个栏目统计', '机构发布下载统计', '专家发布下载统计', '地区统计']" :key="item" :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                        <el-button @click="xlsxDown">
                            下载
                        </el-button>
                    </div>
                    <el-table v-if="statisticalStatement === '各个栏目统计'" :data="tableData"
                        style="width: 100%;margin-top:30px;" height="300px">
                        <el-table-column prop="classify" label="栏目名称">
                        </el-table-column>
                        <el-table-column prop="viewnum" label="浏览量" >
                        </el-table-column>
                        <el-table-column prop="downnum" label="发布量" >
                        </el-table-column>
                    </el-table>

                    <el-table v-if="statisticalStatement === '机构发布下载统计'" :data="tableData"
                        style="width: 100%;margin-top:30px;" height="300px">
                        <el-table-column prop="fullname" label="机构名称">
                        </el-table-column>
                        <el-table-column prop="publishnum" label="发布量" >
                        </el-table-column>
                        <el-table-column prop="downnum" label="下载量">
                        </el-table-column>

                    </el-table>
                    <el-table v-if="statisticalStatement === '专家发布下载统计'" :data="tableData"
                        style="width: 100%;margin-top:30px;" height="300px">
                        <el-table-column prop="fullname" label="专家名称">
                        </el-table-column>
                        <el-table-column prop="publishnum" label="发布量" >
                        </el-table-column>
                        <el-table-column prop="downnum" label="下载量">
                        </el-table-column>

                    </el-table>
                    <el-table v-if="statisticalStatement === '地区统计'" :data="tableData" style="width: 100%;margin-top:30px;"
                        height="300px">
                        <el-table-column prop="address" label="地区">
                        </el-table-column>
                        <el-table-column prop="downnum" label="浏览量">
                        </el-table-column>
                    </el-table>
                    <!--<div style="width: 100%;display: flex;flex-wrap: wrap;">
                        <div class="ranking-item" v-for="(item, i) in rankLinst" :key="i">
                            <div class="icon"></div>
                            <div class="ranking-num">TOP{{ i+1 }}</div>
                            <div class="ranking-name">{{ item.publisher }}</div>
                            <div class="num">{{ item.total }}</div>
                        </div>
                    </div> -->
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import * as homePage from '../../api/homePage.js'
import * as approvalRecord from '../../api/ToBeReviewed'
import * as myDownload from '../../api/myDownload'
import XLSX from 'xlsx';
export default {

    data () {
        return {
            radio: null,
            radioList: [{
                value: '1',
                label: '机构发布统计'
            }, {
                value: '2',
                label: '专家发布统计'
            }, {
                value: '3',
                label: '运营发布统计'
            },],
            time: [],
            btnName: '近一年',
            today: '',
            yesterday: '',
            sevenDaysAgo: '',
            oneMonthAgo: '',
            sixMonthsAgo: '',
            oneYearAgo: '',
            echart: null,
            rankLinst: [],
            totalResult: [],
            approvalRecordList: [],
            myDownloadList: [],
            xAxis: [],
            seriesVal: [],
            tableData: [],
            statisticalStatement: "各个栏目统计"
        }
    },

    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('user_info'))
        this.initRadio()
        this.queryTotal()
        this.getTime()
        this.time = [this.oneYearAgo, this.today]
        this.onLoadapprovalRecordList()
        this.queryCountGroupByMonth()
        //this.queryCountGroupByPublisher()
        this.onLoadMyDownloadList()
        this.getList()

    },

    methods: {
        queryTotal () {
            const param = {
                publisherUid: localStorage.getItem('loginUid'),
                areaType: this.areaType
            }
            homePage.queryTotal(param).then(res => {
                if (res.data.code == 200) {
                    this.totalResult = res.data.data
                }
            }).catch(error => {
                console.log(error)
            })
        },
        initRadio () {
            if (this.userInfo.roleName === '专家') {
                this.radio = '2'
                this.radioList = [this.radioList[1]]
            } else if (this.userInfo.roleName === '机构') {
                this.radio = '1'
                this.radioList = [this.radioList[0]]
            }
        },
        radioChange (e) {
            this.queryCountGroupByMonth()
            this.getList()
        },
        timeChange(e){
            this.queryCountGroupByMonth()
            this.getList()
        },
        queryCountGroupByMonth () {
            const param = {
                userId: this.userInfo.uid,
                type: this.radio,
                startTime: this.time[0],
                endTime: this.time[1]
            }
            homePage.queryCountGroupByMonth(param).then(res => {
                if (res.data.code == 200) {
                    var chartData = res.data.data
                    this.xAxis = chartData.xAxis
                    this.seriesVal = chartData.seriesVal
                    this.initChart()
                }
            }).catch(error => {
                console.log(error)
            })
        },
        queryCountGroupByPublisher () {
            const param = {
                area: this.area,
                areaType: this.areaType
            }
            homePage.queryCountGroupByPublisher(param).then(res => {
                if (res.data.code == 200) {
                    this.rankLinst = res.data.data
                }
            }).catch(error => {
                console.log(error)
            })
        },
        onLoadapprovalRecordList () {
            const param = {
                "status": 1,
                "approvalUid": localStorage.getItem('loginUid'),
                "pageIndex": 1,
                "pageSize": 4
            }
            approvalRecord.queryByPage(param).then(res => {
                if (res.data.code == 200) {
                    this.approvalRecordList = res.data.data.rows
                }
            }).catch(error => {
                console.log(error)
            })
        },
        onLoadMyDownloadList () {
            const param = {
                "status": 1,
                "downloaderUid": localStorage.getItem('loginUid'),
                "pageIndex": 1,
                "pageSize": 4
            }
            myDownload.queryByPage(param).then(res => {
                if (res.data.code == 200) {
                    this.myDownloadList = res.data.data.rows
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getTime () {
            // 获取今日日期
            this.today = this.moment().format('YYYY-MM-DD')
            // 获取一年前的日期
            this.oneYearAgo = this.moment().subtract(1, 'year').format('YYYY-MM-DD')
            // 获取半年前的日期
            this.sixMonthsAgo = this.moment().subtract(6, 'months').format('YYYY-MM-DD')
            // 获取一个月前的日期
            this.oneMonthAgo = this.moment().subtract(1, 'month').format('YYYY-MM-DD')
            // 获取七天前的日期
            this.sevenDaysAgo = this.moment().subtract(7, 'days').format('YYYY-MM-DD')
            // 获取昨日日期
            this.yesterday = this.moment().subtract(1, 'days').format('YYYY-MM-DD')

        },
        seletDate (data) {
            this.btnName = data
            if (data === '近一年') {
                this.time = [this.oneYearAgo, this.today]
            } else if (data === '昨日') {
                this.time = [this.yesterday, this.today]
            } else if (data === '近七天') {
                this.time = [this.sevenDaysAgo, this.today]
            } else if (data === '近一个月') {
                this.time = [this.oneMonthAgo, this.today]
            } else if (data === '近半年') {
                this.time = [this.sixMonthsAgo, this.today]
            }
            this.queryCountGroupByMonth()
            this.getList()
        },
        initChart () {
            this.echart = echarts.init(document.getElementById('home-echarts'))
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxis
                },
                yAxis: {
                    type: 'value',
                    name: '文章数/篇'
                },
                series: [
                    {
                        data: this.seriesVal,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#37DBAD'
                            }, {
                                offset: 1,
                                color: '#73E3FA'
                            }]),
                            borderRadius: 10
                        },
                        // 设置条柱宽度
                        barWidth: 20,
                        type: 'bar'
                    }
                ]
            }
            this.echart.setOption(option)
        },
        getList () {
            let param = {
                userId: this.userInfo.uid,
                startDate: this.time[0],
                endDate: this.time[1]
            }
            if (this.statisticalStatement === '地区统计') {
                homePage.getStatisForCity(param).then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else if (this.statisticalStatement === '机构发布下载统计') {
                homePage.getStatisForJigou(param).then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else if (this.statisticalStatement === '专家发布下载统计') {
                homePage.getStatisForZhuanjia(param).then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else if (this.statisticalStatement === '各个栏目统计') {
                homePage.getStatisForLanmu(param).then(res => {
                    if (res.data.code == 200) {
                        this.tableData = res.data.data
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        xlsxDown () {
            let sheetData = []
            if (this.statisticalStatement === '地区统计') {
                sheetData = this.tableData.map(item => ({
                    '地区': item.address,
                    '浏览量': item.downnum

                }))
            } else if (this.statisticalStatement === '机构发布下载统计') {
                sheetData = this.tableData.map(item => ({
                    '机构名称': item.fullname,
                    '发布量': item.publishnum,
                    '下载量': item.downnum
                }))
            } else if (this.statisticalStatement === '专家发布下载统计') {
                sheetData = this.tableData.map(item => ({
                    '专家名称': item.fullname,
                    '发布量': item.publishnum,
                    '下载量': item.downnum
                }))
            } else if (this.statisticalStatement === '各个栏目统计') {
                sheetData = this.tableData.map(item => ({
                    '栏目名称': item.classify,
                    '浏览量': item.viewnum,
                    '发布量': item.downnum
                }))
            }
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.json_to_sheet(sheetData);
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, 'exported_data.xlsx');
        }
    },
}
</script>
<style lang="scss" scoped>
.home-top {
    width: 1600px;
    display: flex;
    justify-content: space-around;
    margin: 20px 0;

    .home-top-item {
        position: relative;
        width: 360px;
        height: 130px;

        .home-tit-one {
            position: absolute;
            top: 50px;
            left: 50px;
            font-size: 24px;
            color: #fff;
        }

        .home-tit-two {
            position: absolute;
            top: 40px;
            left: 140px;
            font-size: 48px;
            color: #fff;

            .home-tit-three {
                font-size: 20px;
                color: #fff;
            }
        }


    }

    .home-top-one {
        background: url('/static/homeImg/one.png');
        background-size: 100% 100%;
    }

    .home-top-two {
        background: url('/static/homeImg/two.png');
        background-size: 100% 100%;
    }

    .home-top-three {
        background: url('/static/homeImg/three.png');
        background-size: 100% 100%;
    }

    .home-top-four {
        background: url('/static/homeImg/four.png');
        background-size: 100% 100%;
    }
}

.home-center {
    width: 1600px;
    display: flex;
    gap: 10px;

    .home-center-left {
        width: 960px;
        height: 300px;
    }

    .home-center-right {
        width: 630px;
        height: 300px;
    }
}

.home-center-tit {
    position: relative;
    display: flex;

    .img-tit {
        position: absolute;
        left: 30px;
        font-size: 18px;
    }
}

.center-left {
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    width: 920px;
    gap: 20px;

    .center-left-item {
        display: flex;
        gap: 10px;
        width: 445px;
        height: 70px;
        border: 1px solid #E0FFF5;
        border-radius: 5px;

        .left-item {
            width: 70px;
            height: 70px;
            background: #F4FAF8;

            .left-item-img {
                margin: 14px 0 4px 23px;
            }

            .left-item-time {
                text-align: center;
                font-size: 10px;
                color: #27A280;
            }
        }

        .right-item {
            .right-item-top {
                width: 360px;
                font-size: 14px;
                color: #4C4C4C;
                line-height: 40px;
                white-space: nowrap;
                /* 将文本限制在一行内 */
                overflow: hidden;
                /* 超出容器宽度的文本进行裁剪 */
                text-overflow: ellipsis;
                /* 设置省略号样式 */
            }

            .right-item-bottom {
                width: 360px;
                font-size: 12px;
                color: #707070;
                white-space: nowrap;
                /* 将文本限制在一行内 */
                overflow: hidden;
                /* 超出容器宽度的文本进行裁剪 */
                text-overflow: ellipsis;
                /* 设置省略号样式 */
            }
        }
    }
}

.center-right {
    margin-top: 60px;

    .center-right-item {
        display: flex;
        gap: 10px;
        margin-bottom: 30px;

        .icon {
            margin-top: 3px;
            width: 10px;
            height: 10px;
            background: linear-gradient(136deg, #D9AFD9 0%, #93FACC 100%);
            border-radius: 5px;
        }

        .tit-name {
            width: 550px;
            font-size: 14px;
            color: #4C4C4C;
            white-space: nowrap;
            /* 将文本限制在一行内 */
            overflow: hidden;
            /* 超出容器宽度的文本进行裁剪 */
            text-overflow: ellipsis;
            /* 设置省略号样式 */

        }
    }
}

.home-bottom {
    width: 1600px;
    margin: 10px 0;

    .echarts-top {
        position: relative;
        height: 40px;
        display: flex;

        .echarts-top-img {
            position: absolute;
            top: 10px;
            left: 0;
        }

        .echarts-top-tit {
            position: absolute;
            top: 12px;
            left: 24px;
            color: #4C4C4C;
            margin-left: 10px;
        }

        .echarts-top-radio {
            position: absolute;
            top: 6px;
            left: 190px;
        }

        .echarts-top-btn {
            position: absolute;
            top: 6px;
            left: 540px;
            display: flex;
            gap: 16px;

            .btnSelet {
                background: #27A280;
                color: #fff;
            }
        }

        .echarts-top-time {
            position: absolute;
            top: 6px;
            left: 1060px;
        }
    }
}

#home-echarts {
    width: 950px;
    height: 485px;
}

.ranking {
    width: 624px;

    .ranking-tit {
        text-align: center;
        line-height: 60px;
        color: #4C4C4C;
        font-size: 16px;
    }
}

.ranking-item {
    display: flex;
    width: 350px;
    font-size: 14px;
    line-height: 32px;
    margin-bottom: 20px;

    .icon {
        height: 10px;
        width: 10px;
        margin: 11px 0 0 40px;
        background: #777;
        border-radius: 5px;
    }

    .ranking-num {
        width: 30px;
        margin-left: 16px;
        color: #666;
    }

    .ranking-name {
        margin-left: 36px;
        width: 100px;
        color: #4C4C4C;
    }

    .num {
        margin-left: 36px;
        height: 32px;
        width: 32px;
        background: rgba(39, 162, 128, 0.1);
        line-height: 32px;
        color: #27A280;
        text-align: center;
        border-radius: 16px;
    }
}
</style>
